<template>
  <div>
    <el-dialog title="添加客户" :visible.sync="dialogVisible" width="30%">
      <el-form :rules="rules" ref="form" :model="form" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入电话"></el-input>
        </el-form-item>
        <el-form-item label="需求" prop="demand">
          <el-input
            v-model="form.demand"
            type="textarea"
            autosize
            placeholder="请填写需求"
          ></el-input>
        </el-form-item>

        <!-- <el-form-item
          label="添加人"
          prop="people"
        >
          <el-input v-model="form.people" placeholder="请输入添加人"></el-input>
        </el-form-item>-->
        <el-form-item label="类型" prop="status">
          <template>
            <el-select
              v-model="form.status"
              placeholder="请选择类型"
              @change="change1"
            >
              <el-option
                v-for="item in leix"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="标签" prop="tags">
          <template>
            <el-select
              v-model="form.tags"
              placeholder="请选择标签"
              multiple
              @change="change2"
            >
              <el-option
                v-for="item in biaoqian"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="来源" prop="fid">
          <template>
            <el-select
              v-model="form.fid"
              placeholder="请选择来源"
              @change="change3"
            >
              <el-option
                v-for="item in laiyuan"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <!-- <el-form-item label="地区">
          <el-cascader
            size="large"
            :options="options"
            v-model="selectedOptions"
            @change="addressChange"
          >
          </el-cascader>
        </el-form-item> -->
        <el-form-item label="公司">
          <el-input
            v-model="form.company"
            type="text"
            autosize
            placeholder="请输入公司"
          ></el-input>
        </el-form-item>
        <el-form-item label="职位">
          <el-input
            v-model="form.job"
            type="text"
            autosize
            placeholder="请输入职位"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input
            v-model="form.email"
            type="text"
            autosize
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item label="微信号">
          <el-input
            v-model="form.wxAccount"
            type="text"
            autosize
            placeholder="请输入微信号"
          ></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <!-- <el-input
            v-model="form.birthday"
            type="text"
            autosize
            placeholder="请输入生日"
          ></el-input> -->
          <el-date-picker v-model="form.birthday" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="form.remark"
            type="textarea"
            autosize
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-dialog
        width="30%"
        title="必填项不能为空！"
        :visible.sync="dialogVisible1"
        append-to-body
      >
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {regionData, CodeToText} from "element-china-area-data";
  import {tagList} from "@/api/toolUser";
  import {statusList} from "@/api/toolUser";
  import {sourceList} from "@/api/toolUser";
  import {user} from "@/api/toolUser";

  export default {
    name: "create",
    data() {
      // 自定义验证
      var checkPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error("手机号不能为空"));
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
          console.log(reg.test(value));
          if (reg.test(value)) {
            callback();
          } else {
            return callback(new Error("请输入正确的手机号"));
          }
        }
      };
      return {
        dialogVisible: false,
        dialogVisible1: false,
        id1: "",
        id2: "",
        id3: "",
        //标签数组
        biaoqian: [],
        //类型数组
        leix: [],
        //来源数组
        laiyuan: [],
        options: regionData,
        selectedOptions: [],
        form: {
          name: "",
          phone: "",
          demand: "",
          status: "",
          tags: [],
          fid: "",
          company: "",
          job: "",
          email: "",
          wxAccount: "",
          remark: "",
          type: 0,
          birthday: ""
        },
        //表单验证
        rules: {
          name: [{required: true, message: "请输入姓名", trigger: "blur"}],
          phone: [{required: true, trigger: "blur", validator: checkPhone}],
          demand: [{required: true, message: "请输入需求", trigger: "blur"}],
          status: [{required: true, message: "请选择类型", trigger: "blur"}],
          //  people: [{ required: true, message: '请输入添加人', trigger: 'blur' }],
          tags: [
            {
              type: "array",
              required: true,
              message: "请选择标签",
              trigger: "blur",
            },
          ],
          fid: [{required: true, message: "请输选择来源", trigger: "blur"}],
        },
      };
    },
    methods: {
      show() {
        this.form = {
          name: "",
          phone: "",
          demand: "",
          status: "",
          tags: [],
          fid: "",
          company: "",
          job: "",
          email: "",
          wxAccount: "",
          remark: "",
          type: 0,
          birthday: ""
        };
        this.dialogVisible = true;
        this.getTag();
        this.getStatus();
        this.getSource();
      },
      //添加用户
      add(form) {
        // this.dialogVisible1 = true
        // if (this.form.name != "" && this.form.phone != "" && this.form.xuq != "" && this.form.value != "" && this.form.value1 != "" && this.form.value2 != "") {
        //   this.dialogVisible1 = false
        this.$refs[form].validate((valid) => {
          if (valid) {
            if (this.form.email != "") {
              var verify = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
              if (!verify.test(this.form.email)) {
                this.$message.warning("邮箱格式错误, 请重新输入");
                return false;
              }
            }
            if (this.form.wxAccount != "") {
              var weixin = /^[0-9a-zA-Z]+$/;
              if (!weixin.test(this.form.wxAccount)) {
                this.$message.warning("微信号格式错误, 请重新输入");
                return false;
              }
            }
            console.log(this.form);
            user(this.form).then((res) => {
              if (res.status == 200) {
                this.dialogVisible = false;
                this.$message.success("添加成功");
                this.$emit("Ok");
              }
            });
          } else {
            this.$message.warning("添加失败");
            return false;
          }
        });

        // }
      },
      addressChange(arr) {
        console.log(arr);
        // this.form.address = CodeToText[arr[0]] + ' ' + CodeToText[arr[1]] + ' ' + CodeToText[arr[2]]
        // console.log(this.form)
      },
      //标签数据
      getTag() {
        let form = {
          page: 1,
          size: 9999
        };
        tagList(form).then((res) => {
          if (res.status === 200) {
            //  console.log(res)
            this.biaoqian = res.result.records;
          }
        });
      },
      //状态数据
      getStatus() {
        let form = {
          page: 1,
          size: 9999
        };
        statusList(form).then((res) => {
          if (res.status == 200) {
            //  console.log(res)
            this.leix = res.result.records;
          }
        });
      },
      //来源数据
      getSource() {
        let form = {};
        sourceList(form).then((res) => {
          if (res.status == 200) {
            console.log(res);
            this.laiyuan = res.result;
          }
        });
      },
      change1(e) {
        console.log(e);
        this.id1 = e;
      },
      change2(e) {
        this.id2 = e;
        console.log(this.id2);
      },
      change3(e) {
        console.log(e);
        this.id3 = e;
      },
    },
  };
</script>

<style scoped>
</style>
